<script setup lang="ts">
import { incrementNumber } from '@/utils/index';
import { onMounted, ref } from 'vue'
import { incrementNumberComputed } from '../../utils';

// 数据结构
interface IData {
  // 色值
  icon: string
  // 标题
  title: string
  // 数值
  count: number
  // 比例
  percent: number
}

const sum = ref(0);
const data = ref<IData[]>([])

onMounted(() => {
  // TODO: 接口回来
  incrementNumber(821, 800, sum);

  data.value = [
    {
      icon: '#179AFF',
      title: '微型无人机',
      count: 32,
      percent: 64
    },
    {
      icon: '#1CDBFF',
      title: '小型无人机',
      count: 14,
      percent: 28
    },
    {
      icon: '#FF4A4A',
      title: '中型无人机',
      count: 14,
      percent: 28
    },
    {
      icon: '#FF7734',
      title: '大型无人机',
      count: 1,
      percent: 2
    },
    {
      icon: '#FFC97B',
      title: '有人直升机',
      count: 1,
      percent: 2
    },
  ].map((item) => {
    return {
      ...item,
      count: incrementNumberComputed(item.count, 1000),
      percent: incrementNumberComputed(item.percent, 1000),
    }
  }) as any
})

// TODO: 点击飞行器
const handleClick = (item: IData) => {
  console.log(item);
}
</script>

<template>
  <div class="aircraft">
    <div class="aircraft-header"></div>
    <div class="aircraft-content">
      <div class="aircraft-content-sum card-title">
        <h1>已登记飞行器</h1>
        <span class="aircraft-content-sum-num card-title-num">
          <span class="aircraft-content-sum-num-num card-title-num-num">{{ sum }}</span>
          <span class="aircraft-content-sum-num-unit card-title-num-unit">架</span>
        </span>
      </div>
      <div class="aircraft-content-pic"></div>
      <div class="aircraft-content-data">
        <div v-for="(item, index) in data" :key="index" class="aircraft-content-data-item" @click="handleClick(item)">
          <div class="aircraft-content-data-item-title">
            <span :style="{ background: item.icon }"></span>{{ item.title }}
          </div>
          <div class="aircraft-content-data-item-right">
            <div class="aircraft-content-data-item-right-count">{{ item.count }}架</div>
            <div class="aircraft-content-data-item-right-percent">{{ item.percent }}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.aircraft {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    margin-bottom: 6px;
    background-image: url('@/assets/facility/aircraft-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 428px;
    padding: 10px 20px 20px 20px;

    &-pic {
      width: 100%;
      height: 152px;
      margin: 15px 0 10px 0;
      background-image: url('@/assets/facility/aircraft/bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }

    &-data {
      width: 100%;
      height: 168px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px;
      border-radius: 3px;
      box-sizing: border-box;
      border: 1px solid;
      border-image: linear-gradient(174deg, #4DB6E7 -8%, rgba(77, 182, 231, 0.4) 47%, rgba(188, 168, 117, 0) 89%) 0.84;

      &-item {
        box-sizing: border-box;
        width: 100%;
        height: 32px;
        padding: 0px 8px 0px 12px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        cursor: pointer;
        user-select: none;

        &:last-child {
          margin-bottom: 0;
        }

        &-title {
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: normal;
          line-height: 21px;
          letter-spacing: normal;
          color: #FFFFFF;

          span {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            margin-right: 8px;
          }
        }

        &-right {
          display: flex;
          flex-direction: row;
          align-items: center;

          &-count {
            width: 46px;
            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: bold;
            line-height: 21px;
            text-align: right;
            letter-spacing: normal;
            /* 字体颜色-正文色 */
            color: #FFFFFF;
            margin-right: 32px;
          }

          &-percent {
            width: 46px;
            font-family: YouSheBiaoTiHei;
            font-size: 18px;
            font-weight: bold;
            line-height: 21px;
            text-align: right;
            letter-spacing: normal;
            color: #FFFFFF;
          }
        }
      }
    }
  }
  .card-title-num-num{
    font-family: YouSheBiaoTiHei;
    font-size: 30px;
  }
}
</style>
